<template>
  <div>
    <div id="radio_wrap">
      <div id="radio">
        <!-- 电台介绍 -->
        <div id="introduce">
          <img class="introduce_img" :src="data.picUrl" alt>
          <div class="introduce_font">
            <i class="el-icon-s-promotion"></i>
            <span>电台</span>
            <h3 style="margin:10px 0 10px;">{{data.name}}</h3>
            <div style="line-height:35px;display:block;height:40px;">
              <a style="margin-right:10px;float:left" href="javascript:;">
                <img class="introduce_font_img" :src="data.dj.avatarUrl" alt>
              </a>
              <a style="float:left" href="javascript:;">
                <span class="introduce_font_span">{{data.dj.nickname}}</span>
              </a>
            </div>
            <br>
            <p class="introduce_font_p">
              <a class="introduce_font_a" href="javascript:;">{{data.category}}</a>
              {{data.desc}}
            </p>
          </div>
        </div>
        <!-- 节目列表 -->
        <div>
          <el-table :data="radioData" stripe style="width: 100%">
            <el-table-column prop="serialNum" width="60"></el-table-column>
            <el-table-column prop="name" width="300"></el-table-column>
            <el-table-column prop="likedCount" label="点赞" width="90"></el-table-column>
            <el-table-column prop="listenerCount" label="播放" width="90"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { radioDetails } from "@/api";
export default {
  data() {
    return {
      radioData: [],
      data: {}
    };
  },
  created() {
    this.data = this.$route.params.data;
    this.getRadilDetails(this.data.id);
    // console.log(this.data);
  },
  methods: {
    getRadilDetails(rid) {
      radioDetails(rid).then(res => {
        this.radioData = res.data.programs;
        // console.log(this.radioData);
      });
    }
  }
};
</script>

<style>
#radio_wrap {
  margin: 0 auto;
  width: 1200px;
  padding: 40px;
}
.introduce_img {
  width: 256px;
  float: left;
}
.introduce_font {
  float: left;
  width: 800px;
  margin-left: 50px;
}
.introduce_font_img {
  width: 35px;
}
.introduce_font_span {
  display: inline-block;
  color: #0c73c2;
  font-size: 12px;
}
.introduce_font_span:hover {
  text-decoration: underline;
}
.introduce_font_a {
  border: 1px solid #c00;
  color: #c00;
  font-size: 12px;
  margin-right: 6px;
}
.introduce_font_p {
  color: #666;
  font-size: 12px;
}
</style>